<template>
  <div class="chat-container">
    <message-list :messages="messages" />
    <input-area @send="handleSend" />
  </div>
</template>

<script>
import MessageList from './MessageList.vue'
import InputArea from './InputArea.vue'

export default {
  name: 'ChatContainer',
  components: {
    MessageList,
    InputArea
  },
  props: {
    messages: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleSend(message) {
      this.$emit('send-message', message)
    },
  }
}
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
</style>
